<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3.1.1 声明式地描述UI</title>
</head>
<body>
    
</body>
    <script>
        /**
         * Vue.js 3 是一个声明式的 UI 框架，
         *  意思是说用户在使用 Vue.js 3 开发页面时是声明式地描述 UI 的
         * 
         * 编写前端页面都涉及哪些内容
         * - DOM 元素：例如是 div 标签还是 a 标签
         * - 属性：如 a 标签的 href 属性，再如 id、class 等通用属性
         * - 事件：如 click、keydown 等
         * - 元素的层级结构：DOM 树的层级结构，既有子节点，又有父节点
         * 
         * Vue.js 3 声明式地描述上述内容
         * - 使用与 HTML 标签一致的方式来描述 DOM 元素，
         *    例如描述一个div 标签时可以使用 <div></div>
         * - 使用与 HTML 标签一致的方式来描述属性，
         *    例如 <div id="app"></div>
         * - 使用 : 或 v-bind 来描述动态绑定的属性，
         *    例如 <div :id="dynamicId"></div>
         * - 使用 @ 或 v-on 来描述事件，
         *    例如点击事件 <div @click="handler"></div>
         * - 使用与 HTML 标签一致的方式来描述层级结构，
         *    例如一个具有 span 子节点的 div 标签 <div><span></span></div>
         * 
         * 模板和 JavaScript 对象描述 UI 有何不同
         * - 使用 JavaScript 对象描述 UI 更加灵活
         * - 使用 JavaScript 对象来描述 UI 的方式，
         *    其实就是所谓的虚拟 DOM
         * 
         * 渲染函数
         * - 一个组件要渲染的内容是通过渲染函数来描述的
         * - Vue.js 会根据组件的 render 函数的返回值拿到虚拟 DOM，
         *    然后就可以把组件的内容渲染出来了
         * 
        */

        // JavaScript 对象来描述 (虚拟DOM)
        const title = {
            // 标签名称
            tag: 'h1',
            // 标签属性
            props: {
                onClick: handler
            },
            // 子节点
            children: [
                { tag: 'span' }
            ]
        }
        // 对应到 Vue.js 模板
        `<h1 @click="handler"><span></span></h1>`

       
        //  Vue.js 组件中手写的渲染函数
        import { h } from 'vue'
        export default {
            render() {
                return h('h1', { onClick: handler }) // 虚拟 DOM
            }
        }
        
    </script>
</html>